<template>
    <div>
        <IFluent:share28Regular v-if="icon" @click="open"/>
        <Popup ref="popupRef">
            <div class="flex flex-col ">
                <div class="text-sm bg-white rounded-t-lg">
                    <div class="pt-4 text-center text-gray-600 ">分享到</div>
                    <div class="flex items-center px-4 mt-4 space-x-4 overflow-x-auto text-center text-gray-600 whitespace-nowrap"
                        v-for="group in shareList">
                        <div v-for="(share, index) in group" @click="share.handler">
                            <div class="w-12 h-12 mx-auto mb-2 rounded-full">
                                <component :is="share.icon" class="w-full h-full"></component>
                            </div>
                            <div class="">{{ share.name }}</div>
                        </div>
                    </div>
                    <div class="p-4 text-base text-center text-gray-700 " @click="close">取消</div>
                </div>
            </div>
        </Popup>
        <Toast ref="toastRef" />
    </div>
</template>
    
<script setup lang='ts'>
import { useClipboard } from '@vueuse/core'
import wechat from '~/assets/icons/share/wechat.png'
import circle from '~/assets/icons/share/frient-circle.png'
import qq from '~/assets/icons/share/qq.png'
import qqSpace from '~/assets/icons/share/qq-space.png'
import { Icon } from '@iconify/vue'
const popupRef = ref();
const toastRef = ref();
const close = () => {
    popupRef.value?.close()
}
const open = () => {
    popupRef.value?.open()
}
const shareList = ref([
    [{
        name: '微信好友',
        icon: h('img', { src: wechat }),
        handler() {
            toastRef.value.show('分享到微信')
        }
    }, {
        name: '朋友圈',
        icon: h('img', { src: circle }),
        handler() {
            toastRef.value.show('分享到朋友圈')
        }
    }, {
        name: 'QQ空间',
        icon: h('img', { src: qqSpace }),
        handler() {
            toastRef.value.show('分享到QQ空间')
        }
    }, {
        name: ' QQ好友',
        icon: h('img', { src: qq }),
        handler() {
            toastRef.value.show('分享到QQ')
        }
    }],
    [{
        name: '复制链接',
        icon: h(Icon, { icon: 'ph:link', class: "bg-gray-100 p-3 rounded-full" }),
        handler() {
            const { copy } = useClipboard({ source: location.href })
            copy()
            toastRef.value.show('复制成功');
        }
    }, {
        name: '生成海报',
        icon: h(Icon, { icon: 'circum:image-on', class: "bg-gray-100 p-3 rounded-full" }),
        handler() {
            toastRef.value.show('生成海报')
        }
    }]
])
withDefaults(
    defineProps<{
        icon?: boolean
    }>()
    , {
        icon: true
    })
defineExpose({
    open,
    close
})
// https://item.m.jd.com/product/10050626891257.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&gx=RnAomTM2AlC5uP5c-vUSHMnYkwacRA&gxd=RnAoy2MIazPezJ0drox3Xr_cm8FHuk7X8YJFBwQRutLs9dIUUHyzHUkk_hpdt3s
</script>
    
<style></style>